import React from 'react';
import type { StoryObj } from '@storybook/react';
import Portal from './Portal';

const meta = {
    title: 'Portal',
    component: Portal,
};

export default meta;
type Story = StoryObj<typeof meta>;

const elem = React.createElement('div', null, 'Hello, World!');

export const PortalChildren: Story = {
    args: {
        children: elem
    }
};

export const PortalId: Story = {
    args: {
        portalId: "portal",
        children: elem
    },
    decorators: [
        (StoryComponent) => (
            <div id="portal">
                <StoryComponent />
            </div>
        )
    ]
}

export const PortalGetElementById: Story = {
    args: {
        children: elem
    },
    decorators: [
        (StoryComponent) => {
            React.useEffect(() => {
                const portalElement = document.getElementById("portal");
                const portalComponent = <Portal portalElement={portalElement} />;
            }, []);

            return (
                <div id="portal">
                    <StoryComponent />
                </div>
            );
        }
    ]
}

